<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <form method="post" action="">
        <input type="checkbox" id="checkedAllBox" />全选/不全选
        <br />
        <input type="checkbox" name="items" value="足球" />足球<br>
        <input type="checkbox" name="items" value="篮球" />篮球<br>
        <input type="checkbox" name="items" value="羽毛球" />羽毛球<br>
        <input type="checkbox" name="items" value="乒乓球" />乒乓球<br>
        <br />
        <!-- <input type="button" id="checkedAllBtn" value="全　选" />
        <input type="button" id="checkedNoBtn" value="全不选" />
        <input type="button" id="checkedRevBtn" value="反　选" />
        <input type="button" id="sendBtn" value="提　交" /> -->
    </form>

    <script>
        let allCheckBox = document.querySelectorAll("[type= checkbox]");
        let itemCheckBox = document.querySelectorAll("[name=items]");
        // //全选
        // checkedAllBtn.onclick = function() {
        //     allCheckBox.forEach(item => {
        //         item.checked = true;
        //     })
        // }

        // // //全不选
        // checkedNoBtn.onclick = function() {
        //     allCheckBox.forEach(function(item) {
        //         item.checked = false;
        //     })
        // }

        // //反选 
        // checkedRevBtn.onclick = function() {
        //     checkedAllBox.checked = true;
        //     itemCheckBox.forEach(function(item) {
        //         item.checked = !item.checked;
        //         if (!item.checked) {
        //             checkedAllBox.checked = false;
        //         }
        //     })
        // }

        // // // 提价
        // sendBtn.onclick = function() {
        //     itemCheckBox.forEach(item => {
        //         if (item.checked) {
        //             console.log(item.value)
        //         }
        //     })
        // }

        // //item事件

        // itemCheckBox.forEach(function(item) {
        //     item.onclick = function() {
        //         checkedAllBox.checked = true;
        //         itemCheckBox.forEach(function(item) {
        //             if (!item.checked) {
        //                 checkedAllBox.checked = false;
        //             }
        //         })
        //     }
        // })

        //全选/不全选
        // checkedAllBox.onclick = function() {
        //     itemCheckBox.forEach(function(item) {
        //         // if (checkedAllBox.checked) {
        //         //     item.checked = true;
        //         // } else {
        //         //     item.checked = false;
        //         // }
        //         item.checked = checkedAllBox.checked;

        //     })
        // }

        checkedAllBox.onclick = function() {
            itemCheckBox.forEach(function(item) {
                item.checked = checkedAllBox.checked;
            })
        }

        itemCheckBox.forEach(function(item) {
            item.onclick = function() {
                checkedAllBox.checked = true;
                itemCheckBox.forEach(function(item) {
                    if (!item.checked) {
                        checkedAllBox.checked = false
                    }
                })
            }
        })
    </script>
</body>

</html>